<template>
  <div class="order-details-container">
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="order-details">
      <div class="order-info" v-model="item">
        <el-row class="order-el-row">
          <el-col :span="12" class="order-el-col">
            <p>下单人: {{ item.personalName }}</p>
            <p>维修方式：{{item.repairMethod}}</p>
            <p>报修问题1：{{item.repairIssue1}}</p>
            <p>报修问题2：{{item.repairIssue2}}</p>
            <p>描述：{{item.description}}</p>
          </el-col>
          <el-col :span="12" class="order-el-col">
            <div class="weui-logos">
              <!--            <img src="@/assets/weui-logo.png" alt="WeUI Logo">-->
              <!--            <img src="@/assets/weui-logo.png" alt="WeUI Logo">-->
            </div>
          </el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="12" class="order-el-col">
            <p>订单编号: {{ item.orderNumber }}</p>
            <p>创建时间: {{ item.createTime }}</p>
            <p>上门支付时间: {{item.onSitePaymentTime}}</p>
            <p>工单支付时间: {{item.workOrderPaymentTime}}</p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      value: localStorage.getItem("queueId"),
      item: {}
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    findmaint() {
      axios.post("/carorder/findCarOrderById?id=" + this.value).then(res => {
        this.item = res.data.data.maintorder;
      })
    }
  },
  created() {
    this.findmaint();
  }
}
</script>

<style scoped>
.order-details-container {
  width: 100%;
  height: 100%;
  background-color: #eceaea;
}

.order-el-row {
  padding-left: 10px;
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 10px;

}
.order-el-col{
  //background-color: oldlace;
  width: 100%;
  height: 100%;
}
.order-info {
  background-color: #f6f4f4;
  margin-bottom: 20px;
  text-align: left;
}

.order-details {
  padding: 8px;
}

.order-header {
  text-align: center;
  margin-bottom: 20px;
}

.weui-logos {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100px;
  height: 100px;
}
</style>
